<template>
  <div class="home">
	  <div class="top">
		  <div class="logo">
			  <div style="display:flex;justify-content: space-around;">
				  <h3>波波商城管理系统</h3>
				  <div style="color:#409eff;" @click="logout">退出登录</div>
			  </div>
			  
		  </div>
	  </div>
	  <div class="center">
		  <div class="menu">
		  		  <el-menu
		  		          default-active="user"
		  		          class="el-menu-vertical-demo"
		  		          @open="handleOpen"
		  		          @close="handleClose"
		  				  router
		  		        >
					 <el-menu-item :index="item.url" v-for="(item,i) in menuList" :key="i">{{item.name}}</el-menu-item>
		  		  	<!-- <el-menu-item index="user">用户管理</el-menu-item>
					  <el-menu-item index="role">角色管理</el-menu-item>
		  		  	  <el-menu-item index="permission">权限管理</el-menu-item>
		  		  	  <el-menu-item index="menu">菜单管理</el-menu-item> -->
		  		  </el-menu> 
		  </div>
		  <div class="content">
		  		  <router-view></router-view>
		  </div>
	  </div>
	
  </div>
</template>

<script setup>
	import {http} from "../components/http.js"
	import {ref,onMounted} from "vue"
	import router from "../router/index.js"
	const menuList = ref([])
	onMounted(()=>{
		console.log("onmounted")
		http({url:"/userInfo",method:"get"}).then(res=>{
			menuList.value = res.data.data.menu
			// router.addRoute("index",{path:"/user",component:()=>import("@/views/user.vue")})
			res.data.data.menu.forEach((item)=>{
				router.addRoute("index",{path:"/"+item.url,component:()=>import(`@/${item.path}`)})
				console.log(router)
			})
			router.replace("/user")
		})
	})
	function logout(){
		localStorage.removeItem("token")
		router.replace("/login")
	}
</script>
<style type="text/css">
	.top{
		width:100%;
		height:100px;
		line-height:100px;
		background:#f0f0f0;
	}
	.center{
		display:flex;
	}
	.menu{
		width:200px;
		height:100vh;
		overflow:auto;
	}
</style>
